<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.min.js"></script>
</head>
<body>
<img id="avatar_img">
<!-- onsubmit="return false" 表示点击表单中的按钮之后，不会提交 -->
<form method="post" onsubmit="return false;" enctype="multipart/form-data">
    File: <input id="avatar" type="file"/><br>
    <button id="subBtn">提交</button>
</form>

<script>
    let subBtn = $('#subBtn')
    let avatar_img = $('#avatar_img')
    // let avatar = $('#avatar')  // jquery对象
    // js原生对象, 因为等会提交的时候，我们要获取文件，必须得通过原生js对象来获取
    let avatar = document.querySelector('#avatar')

    let formData = new FormData()  // JS内置的一个对象，专门用来实现异步上传

    // subBtn.click(function() {})
    subBtn.click(() => {
        // avatar.files 拿到图片的信息
        let file = avatar.files['0']
        formData.append('avatar', file)

        $.ajax({
    //        url: 'upload',   // 请求地址
	        url: 'http://localhost:8081/eduoss/fileOss',
            type: 'post',    // 请求的方式
            data: formData,
            contentType: false,   // 不用设置 MIME 类型
            processData: false
        }).then(res => {
            avatar_img.attr('src', res.file_path)
        })
    })
</script>
</body>
</html>